<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Online HTML Editor</title>

<style type="text/css">
#rgbrgba{
    width:150px;
    text-align:center;
    background:#aaa;
    display:block;
    padding:3px 0;
    font:bold 16px Serif;
    text-decoration:none;
    color:#fff;
}
.jqcprgba{
    background:black;
    color:#fff;
    width:400px;
    height:100px;
}
.jqcp{
    color:#000;
    background:lightblue;
    width:800px;
    height:100px;       
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function() {
	$( "#rgbrgba" ).click(function(){
		$( "#selector" ).toggleClass( "jqcp", "jqcprgba", "slow" );
		$( "#selector" ).toggleClass( "jqcprgba", "jqcp", "slow" );
		return false;	
	});
});
</script> 
</head>

<body>

<input id="selector" class="jqcp" value="#5556666">
<a href="#" id="rgbrgba">RGBA/RGB</a>

</body>
</html>